<template>
  <v-card>
    <v-select
      v-model="search"
      :items="searchOption"
      key="text"
      label="搜索"
      placeholder="搜索"
    >
      <template #append>
        <v-btn @click="refresh" icon>
          <v-icon>mdi-refresh</v-icon>
          <v-tooltip>刷新数据</v-tooltip>
        </v-btn>
      </template>
    </v-select>
    <v-data-table
      v-model="select"
      :items="useList.userList"
      filter-keys="role"
      :search="search"
      show-select
      return-object
    />

    <v-btn @click="dialog = true" class="w-100" >
      <v-icon size="large">mdi-pencil</v-icon>
      编辑并发送通知
      <v-tooltip activator="parent">编辑并发送通知</v-tooltip>
      <v-dialog v-model="dialog">
        <v-card>
          <v-card-title>通知编辑</v-card-title>
          <v-card-text>
            <v-textarea
              v-model="notifycationContent"
              label="通知内容"
              placeholder="请输入通知内容"
              auto-grow
            >
            </v-textarea>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="sendNotifycation" color="primary">发送</v-btn>
            <v-btn @click="dialog = false">返回</v-btn>
          </v-card-actions>
        </v-card>
        </v-dialog>
    </v-btn>
  </v-card>
  <overlay-tip ref="overlayTipInstance" />
</template>

<script setup lang="ts">
import { useUserListStore } from '@/stores/user/userList';
import { onBeforeMount, ref, useTemplateRef } from 'vue';
import { Role } from '@/services/users/types';
import { API } from '@/services';
import overlayTip from '@/components/common/overlayTip.vue';
onBeforeMount(() => {
  useList.dispatchGetAllUser();
})
const useList = useUserListStore();

const overlayTipInstance = useTemplateRef('overlayTipInstance');

function sendNotifycation() {
  API.users.sendNotfication(
    select.value.map((item:{id:string, role:Role, name:string})=> {
    if(item.role === Role.Student) {
      return {
        id: item.id,
        role: 'student',
      }
    }else{
      return {
        id: item.id,
        role: 'teacher',
      }
    }
  }),
  notifycationContent.value
).then(()=>{
    overlayTipInstance.value!.info('发送成功', 3000);
    dialog.value = false;
  })
}
const select = ref([]);
const search = ref(Role.Student);

const searchOption = [
  { title: '学生', value: Role.Student },
  { title: '教师', value: Role.Teacher },
  { title: '全部', value: null },
];

function refresh() {
  useList.dispatchGetAllUser();
}

const notifycationContent = ref('');
const dialog = ref(false);
</script>
